<template>
    <div>
        <div class="flexbox flexcenter flexbetween mt_20">
            <div class="medium_title flexbox flexcenter">
                <img src="../../assets/img/medium_04.svg" alt="">
                <span class="color_01">星图筛选条件</span>
            </div>
            <el-link type="primary" :underline="false" @click="resetXtData">重置星图条件</el-link>
        </div>
        <template v-for="(item,index) in formData.xt_options">
            <div class="feixing_box flexbox" :key="index">
                <div class="fxing_left flexbox flexcenter flexjust fx_bg01" v-if="index=='price'">
                    星图价格
                </div>
                <div class="fxing_left flexbox flexcenter flexjust fx_bg02" v-if="index=='audience'">
                    观众画像
                </div>
                <div class="fxing_left flexbox flexcenter flexjust fx_bg03" v-if="index=='fans'">
                    粉丝画像
                </div>
                <div class="fxing_right flex" v-if="index=='price'">
                    <div class="flexbox flexcenter">
                        <template v-for="(items,indexs) in item">
                            <el-popover placement="bottom" title="" width="200" v-model="items.visible" @hide="cancelData(items)" content="" :key="indexs">
                                <div class="font_14 color_01">{{items.first_text}}/{{items.text}}</div>
                                <div class="feixing_input flexbox flexcenter">
                                    <el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="items.min" size="small" placeholder="请输入" style="width:70px"></el-input>
                                    <span>{{items.unit}}</span>
                                    <span style="margin-left:10px">~</span>
                                    <el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="items.max" size="small" placeholder="请输入" style="width:70px"></el-input>
                                    <span>{{items.unit}}</span>
                                </div>
                                <div class="feixing_btn">
                                    <el-button type="text" style="padding:0" @click="resetData(items)">重置</el-button>
                                    <el-button type="primary" size="mini" @click="subData(items)">确定</el-button>
                                </div>
                                <div class="feixing_item" :class="{'active':isSelect(items)}" slot="reference">{{items.text}}</div>
                            </el-popover>
                        </template>
                    </div>
                </div>
                <div class="fxing_right flex" v-else>
                    <div class="flexbox feixing_colum" v-for="(items,indexs) in item" :key="indexs">
                        <div class="feixing_text" v-if="indexs=='sex'">性别分布：</div>
                        <div class="feixing_text" v-else-if="indexs=='age'">年龄分布：</div>
                        <div class="feixing_text" v-else-if="indexs=='crowd'">八大人群：</div>
                        <div class="feixing_text" v-else-if="indexs=='device'">设备分布：</div>
                        <div class="flexbox flexcenter flex flex_wrap">
                            <template v-for="(item3,index3) in items">
                                <el-popover placement="bottom" title="" width="200" v-model="item3.visible" @hide="cancelData(item3)" content="" :key="index3">
                                    <div class="font_14 color_01">{{item3.first_text}}/{{item3.second_text}}/{{item3.text}}</div>
                                    <div class="feixing_input flexbox flexcenter">
                                        <el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="item3.min" size="small" placeholder="请输入" style="width:70px"></el-input>
                                        <span>{{item3.unit}}</span>
                                        <span style="margin-left:10px">~</span>
                                        <el-input oninput="value=value.replace(/[^\d.]/g,'')" v-model="item3.max" size="small" placeholder="请输入" style="width:70px"></el-input>
                                        <span>{{item3.unit}}</span>
                                    </div>
                                    <div class="feixing_btn">
                                        <el-button type="text" style="padding:0" @click="resetData(item3)">重置</el-button>
                                        <el-button type="primary" size="mini" @click="subData(item3)">确定</el-button>
                                    </div>
                                    <div class="feixing_item" :class="{'active':isSelect(item3)}" slot="reference">{{item3.text}}</div>
                                </el-popover>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div class="feixing_box flexbox">
            <div class="fxing_left flexbox flexcenter flexjust fx_bg04">
                已设置条件
            </div>
            <div class="fxing_right flex">
                <div class="flexbox flexcenter flex_wrap">
                    <template v-if="hasList.length>0">
                        <div class="feixing_has flexbox flexcenter" v-for="(item,index) in hasList" :key="index">
                            <span class="color_01" v-if="item.second_text">{{item.first_text}}/{{item.second_text}}/{{item.text}}：</span>
                            <span class="color_01" v-else>{{item.first_text}}/{{item.text}}：</span>
                            <span class="color_02">{{item.min}}{{item.unit}}~{{item.max}}{{item.unit}}</span>
                            <span class="el-icon-close" @click="resetData(item)"></span>
                        </div>
                    </template>
                    <div class="no_check" v-else>未选择条件</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import "@/assets/css/medium.css";
export default {
    props: ["formData"],
    components: {},
    name: "",
    data() {
        return {
            hasList: [],
        };
    },
    created() {},
    methods: {
        // 选中状态
        isSelect(item) {
            let isCheck = false;
            if (item.min && item.max) {
                isCheck = true;
            }
            return isCheck;
        },

        // 重置
        resetData(item) {
            item.ischeck = false;
            item.min = "";
            item.max = "";
            this.getHasData();
        },

        // 取消
        cancelData(item) {
            item.visible = false;
            if (!item.ischeck) {
                item.min = "";
                item.max = "";
            }
            if(item.min == "" || item.max ==""){
                item.min = "";
                item.max = "";
            }
            this.getHasData();
        },

        // 确定
        subData(item) {
            item.visible = false;
            item.ischeck = true;
            this.getHasData();
        },

        // 已选条件
        getHasData() {
            let list = this.formData.xt_options;
            let hasList = [];
            for (let i in list) {
                if (i == "price") {
                    for (let s in list[i]) {
                        if (list[i][s].min && list[i][s].max) {
                            hasList.push(list[i][s]);
                        }
                    }
                } else {
                    for (let s in list[i]) {
                        for (let a in list[i][s]) {
                            if (list[i][s][a].min && list[i][s][a].max) {
                                hasList.push(list[i][s][a]);
                            }
                        }
                    }
                }
            }
            for(let i in hasList){
                hasList[i].all_text = hasList[i].first_text+"/"+hasList[i].second_text+"/"+hasList[i].text+":"+hasList[i].min+hasList[i].unit+"~"+hasList[i].max+hasList[i].unit
            }
            this.hasList = hasList;
            this.formData.field_list = hasList.map(item=>{return item.all_text})
        },

        // 重置星图数据
        resetXtData() {
            let list = this.formData.xt_options;
            for (let i in list) {
                if (i == "price") {
                    for (let s in list[i]) {
                        list[i][s].min = "";
                        list[i][s].max = "";
                        list[i][s].visible = false;
                        list[i][s].ischeck = false;
                    }
                } else {
                    for (let s in list[i]) {
                        for (let a in list[i][s]) {
                            list[i][s][a].min = "";
                            list[i][s][a].max = "";
                            list[i][s][a].visible = false;
                            list[i][s][a].ischeck = false;
                        }
                    }
                }
            }
            this.getHasData();
        },
    },
};
</script>


<style scoped>
</style>


